<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机点名</title>
    <style>
        /*统一设置展示区域和按钮的样式*/
        #show, #btn {
            border: 1px solid red;
            width: 200px;
            text-align: center;
            border-radius: 5px;
        }

        /*设置展示区域的样式*/
        #show {
            height: 80px;
            line-height: 80px;
            border-color: #bfea84;
            /*设置字体样式*/
            font-size: 16px;
            font-weight: bolder;
            font-family: "微软雅黑", serif;

            /*设置背景颜色*/
            background-color: #e9f8d6;
        }

        /*设置按钮样式*/
        #btn {
            height: 30px;
            /* 设置背景颜色 */
            background-color: #0aa042;
            /* 设置字体颜色，直接使用color属性进行设置*/
            color: white;
            /*设置边框颜色与背景颜色一致*/
            border-color: #0aa042;
            /*设置按钮与展示区域的间距，该间距我们称之为 外边距*/
            /*在css中外边距都是通过margin属性进行设置*/
            margin-top: 10px;
        }

        /*将容器整体移动到中央位置*/
        #container {
            /*使用定位position absolute表示绝对定位，通过left和top属性设置位置*/
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div id="container">
    <!--编写展示区域-->
    <div id="show">
        <span>杰普软件基地</span>
    </div>
    <!--编写按钮-->
    <button id="btn">开始</button>
</div>
</body>
</html>